﻿@page "/components/paper"
@page "/components/MudPaper"

<DocsPage>
    <DocsPageHeader Title="Paper" SubTitle="Paper is a useful and flexible way to shape other components without needing css or style">
        <Description>
            It is generally used for foregrounds but can also be combined with <MudLink Href="/utilities/flex">Flex</MudLink> for layout.
        </Description>
    </DocsPageHeader>

    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Material Design">
                <Description>
                    Paper can represent a surface from the <MudLink Href="https://material.io/design/environment/surfaces.html#material-environment">Material Foundation</MudLink>. Even if you are not designing something "material", the foundations of Material Design are a pillar of MudBlazor and provide useful insight into how many components operate.
                </Description>
            </SectionHeader>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Component">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(PaperComponentExample)">
                <PaperComponentExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Variants">
                <Description>If you need an outlined or square surface, use the <CodeInline>Outlined</CodeInline> or <CodeInline>Square</CodeInline> properties respectively.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(PaperVariantsExample)">
                <PaperVariantsExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
